@charset 'uft-8';
.logined-page{
    position: absolute;
    transition: all 0.3s;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba($color: #222222, $alpha: 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    // display: none;
    z-index: 99999;
    transform: translateX(-100%);
    .input-bar{
        width:100%;
        height: 3.15rem;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 0.48rem 0.35rem 0.35rem;
        background-color: #1e1e1e;
        align-items: center;
        position: relative;
        // border-bottom: 0.05rem solid rgba($color: #ffffff, $alpha: 0.9);
        img{
            width: 1.27rem;
            height: 1.27rem;
        }
        &::after{
            display: block;
            content: '';
            width: 15.28rem;
            height: 0.05rem;
            background-color: #ffffff;
            opacity: 0.2;
            position: absolute;
            bottom:0 ;
        }
        .input-con{
            display: flex;
            position: relative;

            input{
                width: 13.43rem;
                height: 100%;
                background-color: transparent;
                text-indent: 1.8rem;
                outline: none;
                border: 0.05rem solid #fff;
                border-radius: 0.5rem /0.65rem;
                color: #fff;
            }
            img{
                position: absolute;
                width: 0.68rem;
                height: 0.68rem;
                top: 50%;
                left: 0.25rem;
                transform: translateY(-50%);
            }
        }
    }
    .my-profile{
        box-sizing: border-box;
        padding: 0.8rem 2.23rem 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        align-items: center;
        .avator{
            width: 3.23rem;
            height: 3.25rem;
            border-radius: 50%;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .me{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 4.5rem;
            .name{
            display: flex;
            align-items: center;
             color: #fff;
             .username{
                font-size: 0.62rem; 
             }
             .person-center{
                 font-size: 0.36rem;
                 border: solid 0.03rem #d9d9d9;
                 margin-left: 0.2rem;
             }
            } 
            .stars{
                height: 0.9rem;
                line-height: 0.9rem;
            }
         }
         .relation{
             width: 5.1rem;
            height: 0.63rem;
            color: #fff;
            display: -webkit-box;
            font-size: 0.58rem;
            // justify-content: space-between;
            .middile{
                color: #fff;
                font-size: 0.5rem;
            }
            span{
                color: #b60005;
                margin: 0 .2rem;
                vertical-align: middle;
            }
         }
         .btn-tool{
             width: 11.5rem;
             margin-top: 0.55rem;
             button{
                 width: 5.5rem;
                 height: 1.33rem;
                 outline: none;
                 border-radius: 0.63rem;
                 color: #fff;
                 font-size: .58rem;
             }
             button:nth-of-type(1){
                 background-color: #b60005;
             }
             button:nth-of-type(2){
                background-color: #cdcdcd;
            }
         }
    }
    .line{
        width: 100%;
        height: 0.6rem;
        background-color: #d2d2d2;
    }
    .menus{
        width: 100%;
        padding: 0 0.55rem 0;
        box-sizing: border-box;
        color:  rgba($color: #ffffff, $alpha: 0.3);
        font-size: 0.58rem;
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
                width: 0.33rem;
	            height: 0.28rem;
            }
        }
        .items{
            height: 2.23rem;
            line-height: 2.23rem;
            border-bottom:solid 0.05rem #353535;
        }
        .items:nth-last-of-type(1){
            border: none;
        }
        .items:nth-of-type(1){
            height: 6.85rem;
            border-bottom:solid 0.05rem #353535;
            ul{
                width: 10.7rem;
                margin: 0 auto;
                text-align: center;
                color: #fff;
                li{
                   width: 100%;
                    height: 2rem;
                    line-height: 2rem;
                    border-bottom:solid 0.05rem #353535;
                }
                li:nth-last-of-type(1){
                    border: none;
                }
            }
        }
    }
    .login-out{
        button{
            width: 4.5rem;
            height: 1.33rem;
            background-color: #b60005;
            border-radius: 0.63rem;
            font-size: 0.58rem;
            color: #ffffff;
            letter-spacing: 0.02rem;
        }
    }
}